<template>
  <el-container>
    <el-header style="height:130px">
      <!-- 头1 -->
      <el-row class="title1">
        <el-col :span="18">
          <div class="title-t">
            <router-link to="/welcome"><span>政府投资项目审计监督平台</span></router-link>
          </div>
        </el-col>
        <el-col :span="2">
          <a href="/map" target="_blank">
            <div class="title-right" @mouseover="mouseOver" @mouseleave="mouseLeave" :style="active">
              <i class="el-icon-location-outline"></i>
              <span>地图</span>
            </div>
          </a>
        </el-col>

        <el-col :span="2">
          <a href="/gismap" target="_blank">
            <div class="title-right" @mouseover="mouseOver1" @mouseleave="mouseLeave1" :style="active1">
              <i class="el-icon-location-outline"></i>
              <span>GIS地图</span>
            </div>
          </a>
        </el-col>

        <el-col :span="2">
          <div class="title-right">
          <el-dropdown :hide-on-click="false" @command="handleCommand" >
            <span class="el-dropdown-link">
              <i class="el-icon-s-custom"></i>
              市审计局<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a">登出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          </div>


          <!-- <div class="title-right dropdown" @mouseover="mouseOverx" :style="activex">
            <i class="el-icon-s-custom"></i>
            <span>市审计局</span>
            <div class="dropdown-content">
              <div class="dropdown-content-li" @click="logout">登出</div>
            </div>
          </div> -->
        </el-col>
      </el-row>
      <!-- 头1 -->
      <!-- 头2 -->
      <el-row>
        <el-col :span="24">
          <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect" router
            background-color="#4CAAFA" text-color="white" style="z-index: 100;">
            <el-submenu>
              <template slot="title"> <span class="submenu_title">项目信息</span></template>
              <el-menu-item index="/welcome">项目审批信息</el-menu-item>
              <el-menu-item index="/xmmsg">项目信息管理</el-menu-item>
              <el-menu-item index="/bid">招标资料管理</el-menu-item>
              <el-menu-item index="/htzl">合同资料管理</el-menu-item>
              <el-menu-item index="/zjzl">资金资料管理</el-menu-item>
              <el-menu-item index="/sszl">项目实施资料管理</el-menu-item>
            </el-submenu>

            <el-submenu index="2">
              <template slot="title"><span class="submenu_title">审计管理</span> </template>
              <el-menu-item index="/sqgl">审前管理</el-menu-item>
              <el-menu-item index="/sjss">审计实施管理</el-menu-item>
              <el-menu-item index="/bggl">报告管理</el-menu-item>
            </el-submenu>

            <el-menu-item index="/xmjk">项目监控</el-menu-item>
            <el-menu-item index="/xmtj"> 统计分析 </el-menu-item>
            <el-menu-item index="/zbtx"> 指标体系 </el-menu-item>
            <el-menu-item index="/sjzx"> 数据中心 </el-menu-item>
            <el-menu-item class="el-menu-item-last">
              <div>
                <!-- <el-input placeholder="请输入内容" v-model="input2">
                  <template slot="append">搜索</template>
                </el-input> -->
                <search :swidth="339" :owidth="100"></search>
              </div>
              <!-- <div style="margin-top: 20px;">
                <img src="../../../assets/image/sjpic.jpg" />
              </div> -->
            </el-menu-item>
            <!--<div style="margin-top: 20px;">
                 <img src="../../../assets/image/sjpic.jpg" height="100px" width="100%"/>
               </div>-->

          </el-menu>

        </el-col>

      </el-row>
      <!-- 头2 -->
    </el-header>
    <el-main>
      <!-- <div class="title-row">
        <div class="title-left">主管单位</div>
        <div v-for="(item,index) in zgdw"><a :class = "{blue: changeZgdw == index}" @click = "change1(index)">{{item.name}}</a></div>
      </div>
      <div class="title-row">
        <div class="title-left">建设性质</div>
        <div v-for="(item,index) in jsxz"><a :class = "{blue: changeJsxz == index}" @click = "change2(index)">{{item.name}}</a></div>
      </div>
      <div class="title-row">
        <div class="title-left">管理类型</div>
        <div v-for="(item,index) in gllx"><a :class = "{blue: changeGllx == index}" @click = "change3(index)">{{item.name}}</a></div>
      </div>
      <div class="title-row">
        <div class="title-left">年份</div>
        <div v-for="(item,index) in nf"><a :class = "{blue: changeNf == index}" @click = "change4(index)">{{item.name}}</a></div>
      </div> -->
      <router-view></router-view>
    </el-main>
    <!-- 底部   #1E90FF -->
    <el-footer>
      <span>版权所有</span>
    </el-footer>
  </el-container>
</template>


<script>
  import search from '@/components/search/index.vue'
  export default {
    name: "HomeBack",
    data() {
      return {
        activeIndex: "1",
        activeIndex2: "1",
        input2: "",
        showactive: false,
      };
    },
    components: {
      search
    },

    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      handleCommand(command) {
          this.$store.dispatch('LogOut').then(() => {
            this.$router.push('/index')
          })
      },
      mouseOver() {
        this.active = " color:black;"
      },
      mouseLeave() {
        this.active = "color: white;"
      },
      mouseOver1() {
        this.active1 = " color:black;"
      },
      mouseLeave1() {
        this.active1 = "color: white;"
      },
      mouseOverx() {
        this.activex = "color: white;"

      },

      activexClick() {
        this.showactive = true
      },
    },
  };
</script>

<style lang="less" scoped>
  .el-container {
    height: 100vh;
  }

  .title-row {
    background-color: #F3F3F3;
    display: flex;
    align-items: center;
  }

  .title-row div {
    padding: 10px;
  }

  .title-left {
    background-color: #DBDBDB;
    width: 200px;
    text-align: center;
  }

  .title1 {
    padding: 10px;
    height: 100px;
    background-image: url(../../../assets/image/sjpic2.jpg);
    background-size: 100% 100%;
    background-color: rgb(76, 170, 250);
    margin-right: 20px;
    // z-index: 10000;
  }

  .title-t {
    font-size: 40px;
    font-weight: bold;
    color: white;
    text-align: left;
    margin-left: 90px;
    font-family: 华光黑变_CNKI;
    padding-top: 16px;
    padding-bottom: 18px;
    opacity: 1;
  }

  .title-right {
    /* text-align: right; */
    padding-top: 60px;
    color: white;
  }

  .submenu_title {
    font-size: 20px;
  }

  .el-menu {
    margin-right: 20px;
  }

  .el-menu-item {
    font-size: 20px;
  }

  .el-menu-item-last {
    float: right;
    padding-right: 10px;
  }

  .el-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .blue {
    color: blue;
  }

.el-dropdown{
  font-size: 16px;
}
   .el-dropdown-link {
      cursor: pointer;
      color: white;
    }
    .el-icon-arrow-down {
      // font-size: 15px;
      background-color: rgb(76, 170, 250);

    }

  // .dropdown {
  //   position: relative;
  //   display: inline-block;
  //   cursor: pointer;
  //   color: white;
  // }

  // .dropdown-content {
  //   display: none;
  //   position: absolute;
  //   background-color: rgb(76, 170, 250);
  //   min-width: 100px;
  //   text-align: center;
  //   color: white;
  //   border-radius: 5px;
  //   margin-top: 10px;
  // }

  // .dropdown-content:before {
  //   content: "";
  //   width: 0;
  //   height: 0;
  //   position: absolute;
  //   left: 30px;
  //   top: -10px;
  //   border-left: 10px solid transparent;
  //   border-right: 10px solid transparent;
  //   border-bottom: 10px solid rgb(76, 170, 250);

  // }

  // .dropdown:hover .dropdown-content {
  //   display: block;
  // }

  // .dropdown-content-li {
  //   line-height: 36px;
  //   padding: 0 20px;
  //   font-size: 14px;
  // }
</style>
